<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目管理界面重构方案</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        .tab-content { display: none; }
        .tab-content.active { display: block; }
        .task-card { transition: all 0.3s ease; }
        .task-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
        .milestone-card { border-left: 4px solid #3B82F6; }
        .sub-task { margin-left: 2rem; border-left: 2px solid #E5E7EB; }
        .progress-ring { transform: rotate(-90deg); }
        .filter-btn { transition: all 0.2s; }
        .filter-btn.active { background-color: #3B82F6; color: white; }
        .view-toggle { transition: all 0.2s; }
        .view-toggle.active { background-color: #3B82F6; color: white; }
    </style>
</head>
<body class="bg-gray-50">
    <div class="container mx-auto px-4 py-8 max-w-7xl">
        <!-- 页面标题 -->
        <div class="mb-8">
            <h1 class="text-3xl font-bold text-gray-900">项目管理界面重构方案</h1>
            <p class="mt-2 text-gray-600">简化用户体验，整合任务与里程碑管理</p>
        </div>

        <!-- 项目基本信息卡片 -->
        <div class="bg-white rounded-lg shadow p-6 mb-6">
            <div class="flex justify-between items-start">
                <div>
                    <h2 class="text-2xl font-bold text-gray-900">示例项目</h2>
                    <div class="mt-2 flex items-center space-x-4">
                        <span class="px-3 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800">进行中</span>
                        <span class="text-sm text-gray-500"><i class="far fa-calendar mr-1"></i>2024-01-01 - 2024-06-30</span>
                        <span class="text-sm text-gray-500"><i class="far fa-user mr-1"></i>张三</span>
                    </div>
                </div>
                <div class="flex items-center">
                    <div class="mr-4 text-center">
                        <svg class="w-16 h-16">
                            <circle cx="32" cy="32" r="28" stroke="#E5E7EB" stroke-width="4" fill="none"></circle>
                            <circle cx="32" cy="32" r="28" stroke="#3B82F6" stroke-width="4" fill="none" 
                                    stroke-dasharray="176" stroke-dashoffset="61.6" class="progress-ring"></circle>
                        </svg>
                        <div class="text-2xl font-bold text-gray-900">65%</div>
                        <div class="text-xs text-gray-500">项目进度</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 简化的导航标签 -->
        <div class="bg-white rounded-lg shadow mb-6">
            <div class="border-b border-gray-200">
                <nav class="-mb-px flex" aria-label="Tabs">
                    <button class="tab-btn border-b-2 border-blue-500 text-blue-600 font-medium py-4 px-6 text-sm focus:outline-none" data-tab="overview">
                        <i class="fas fa-home mr-2"></i>项目概览
                    </button>
                    <button class="tab-btn border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 font-medium py-4 px-6 text-sm focus:outline-none" data-tab="tasks">
                        <i class="fas fa-tasks mr-2"></i>任务管理
                    </button>
                    <button class="tab-btn border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 font-medium py-4 px-6 text-sm focus:outline-none" data-tab="gantt">
                        <i class="fas fa-chart-gantt mr-2"></i>甘特图
                    </button>
                    <button class="tab-btn border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 font-medium py-4 px-6 text-sm focus:outline-none" data-tab="team">
                        <i class="fas fa-users mr-2"></i>团队协作
                    </button>
                </nav>
            </div>

            <!-- 项目概览标签页 -->
            <div id="overview-tab" class="tab-content active p-6">
                <div class="mb-6">
                    <h3 class="text-lg font-medium text-gray-900 mb-4">项目里程碑与进度</h3>
                    
                    <!-- 里程碑进度卡片 -->
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
                        <!-- 里程碑卡片1 -->
                        <div class="milestone-card bg-white rounded-lg shadow p-4 border border-gray-200">
                            <div class="flex justify-between items-start mb-3">
                                <h4 class="font-medium text-gray-900">需求分析</h4>
                                <span class="px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800">已完成</span>
                            </div>
                            <p class="text-sm text-gray-600 mb-3">完成用户需求调研与分析</p>
                            <div class="flex justify-between items-center text-xs text-gray-500">
                                <span><i class="far fa-calendar mr-1"></i>2024-01-15</span>
                                <span class="font-medium">100%</span>
                            </div>
                            <div class="mt-2 w-full bg-gray-200 rounded-full h-2">
                                <div class="h-2 rounded-full bg-green-500" style="width: 100%"></div>
                            </div>
                        </div>
                        
                        <!-- 里程碑卡片2 -->
                        <div class="milestone-card bg-white rounded-lg shadow p-4 border border-gray-200">
                            <div class="flex justify-between items-start mb-3">
                                <h4 class="font-medium text-gray-900">系统设计</h4>
                                <span class="px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800">已完成</span>
                            </div>
                            <p class="text-sm text-gray-600 mb-3">完成系统架构与详细设计</p>
                            <div class="flex justify-between items-center text-xs text-gray-500">
                                <span><i class="far fa-calendar mr-1"></i>2024-02-28</span>
                                <span class="font-medium">100%</span>
                            </div>
                            <div class="mt-2 w-full bg-gray-200 rounded-full h-2">
                                <div class="h-2 rounded-full bg-green-500" style="width: 100%"></div>
                            </div>
                        </div>
                        
                        <!-- 里程碑卡片3 -->
                        <div class="milestone-card bg-white rounded-lg shadow p-4 border border-gray-200">
                            <div class="flex justify-between items-start mb-3">
                                <h4 class="font-medium text-gray-900">开发实现</h4>
                                <span class="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800">进行中</span>
                            </div>
                            <p class="text-sm text-gray-600 mb-3">完成系统功能开发与测试</p>
                            <div class="flex justify-between items-center text-xs text-gray-500">
                                <span><i class="far fa-calendar mr-1"></i>2024-04-30</span>
                                <span class="font-medium">65%</span>
                            </div>
                            <div class="mt-2 w-full bg-gray-200 rounded-full h-2">
                                <div class="h-2 rounded-full bg-blue-500" style="width: 65%"></div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 最近任务 -->
                    <h3 class="text-lg font-medium text-gray-900 mb-4">最近任务</h3>
                    <div class="bg-white rounded-lg shadow overflow-hidden">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">任务名称</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">负责人</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">截止日期</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">前端界面开发</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">李四</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">进行中</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2024-03-15</td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">数据库设计</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">王五</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">已完成</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2024-02-28</td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">API接口开发</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">赵六</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">待开始</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2024-03-20</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- 任务管理标签页 -->
            <div id="tasks-tab" class="tab-content p-6">
                <!-- 任务管理工具栏 -->
                <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 space-y-4 sm:space-y-0">
                    <div class="flex items-center space-x-4">
                        <h3 class="text-lg font-medium text-gray-900">任务管理</h3>
                        <div class="flex items-center space-x-2">
                            <button class="view-toggle active px-3 py-1 text-sm rounded-md border border-gray-300" data-view="hierarchy">
                                <i class="fas fa-sitemap mr-1"></i>层级视图
                            </button>
                            <button class="view-toggle px-3 py-1 text-sm rounded-md border border-gray-300" data-view="list">
                                <i class="fas fa-list mr-1"></i>列表视图
                            </button>
                            <button class="view-toggle px-3 py-1 text-sm rounded-md border border-gray-300" data-view="board">
                                <i class="fas fa-th mr-1"></i>看板视图
                            </button>
                        </div>
                    </div>
                    <div class="flex items-center space-x-2">
                        <div class="relative">
                            <input type="text" placeholder="搜索任务..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fas fa-search text-gray-400"></i>
                            </div>
                        </div>
                        <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition text-sm">
                            <i class="fas fa-plus mr-2"></i>添加任务
                        </button>
                    </div>
                </div>

                <!-- 筛选器 -->
                <div class="flex flex-wrap gap-2 mb-6">
                    <button class="filter-btn active px-3 py-1 text-sm rounded-full border border-gray-300">全部</button>
                    <button class="filter-btn px-3 py-1 text-sm rounded-full border border-gray-300">待开始</button>
                    <button class="filter-btn px-3 py-1 text-sm rounded-full border border-gray-300">进行中</button>
                    <button class="filter-btn px-3 py-1 text-sm rounded-full border border-gray-300">已完成</button>
                    <button class="filter-btn px-3 py-1 text-sm rounded-full border border-gray-300">高优先级</button>
                    <button class="filter-btn px-3 py-1 text-sm rounded-full border border-gray-300">本周到期</button>
                </div>

                <!-- 层级视图 -->
                <div id="hierarchy-view" class="task-view">
                    <!-- 里程碑1 -->
                    <div class="mb-6">
                        <div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-r-lg mb-4">
                            <div class="flex justify-between items-center">
                                <div>
                                    <h4 class="font-medium text-gray-900">需求分析</h4>
                                    <p class="text-sm text-gray-600 mt-1">完成用户需求调研与分析</p>
                                </div>
                                <div class="flex items-center space-x-2">
                                    <span class="px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800">已完成</span>
                                    <span class="text-sm text-gray-500">100%</span>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 里程碑下的任务 -->
                        <div class="space-y-3 ml-4">
                            <div class="task-card bg-white rounded-lg shadow p-4 border border-gray-200">
                                <div class="flex justify-between items-start">
                                    <div class="flex-1">
                                        <div class="flex items-center">
                                            <input type="checkbox" checked class="mr-3 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                                            <h5 class="font-medium text-gray-900">用户调研</h5>
                                        </div>
                                        <p class="text-sm text-gray-600 mt-1 ml-7">进行用户访谈和问卷调查</p>
                                        <div class="flex items-center mt-2 ml-7 text-xs text-gray-500 space-x-4">
                                            <span><i class="far fa-user mr-1"></i>张三</span>
                                            <span><i class="far fa-calendar mr-1"></i>2024-01-10</span>
                                            <span class="px-2 py-0.5 rounded-full bg-green-100 text-green-800">已完成</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="task-card bg-white rounded-lg shadow p-4 border border-gray-200">
                                <div class="flex justify-between items-start">
                                    <div class="flex-1">
                                        <div class="flex items-center">
                                            <input type="checkbox" checked class="mr-3 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                                            <h5 class="font-medium text-gray-900">需求文档编写</h5>
                                        </div>
                                        <p class="text-sm text-gray-600 mt-1 ml-7">编写详细的需求规格说明书</p>
                                        <div class="flex items-center mt-2 ml-7 text-xs text-gray-500 space-x-4">
                                            <span><i class="far fa-user mr-1"></i>李四</span>
                                            <span><i class="far fa-calendar mr-1"></i>2024-01-15</span>
                                            <span class="px-2 py-0.5 rounded-full bg-green-100 text-green-800">已完成</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 里程碑2 -->
                    <div class="mb-6">
                        <div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-r-lg mb-4">
                            <div class="flex justify-between items-center">
                                <div>
                                    <h4 class="font-medium text-gray-900">系统设计</h4>
                                    <p class="text-sm text-gray-600 mt-1">完成系统架构与详细设计</p>
                                </div>
                                <div class="flex items-center space-x-2">
                                    <span class="px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800">已完成</span>
                                    <span class="text-sm text-gray-500">100%</span>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 里程碑下的任务 -->
                        <div class="space-y-3 ml-4">
                            <div class="task-card bg-white rounded-lg shadow p-4 border border-gray-200">
                                <div class="flex justify-between items-start">
                                    <div class="flex-1">
                                        <div class="flex items-center">
                                            <input type="checkbox" checked class="mr-3 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                                            <h5 class="font-medium text-gray-900">系统架构设计</h5>
                                        </div>
                                        <p class="text-sm text-gray-600 mt-1 ml-7">设计系统整体架构和技术选型</p>
                                        <div class="flex items-center mt-2 ml-7 text-xs text-gray-500 space-x-4">
                                            <span><i class="far fa-user mr-1"></i>王五</span>
                                            <span><i class="far fa-calendar mr-1"></i>2024-02-10</span>
                                            <span class="px-2 py-0.5 rounded-full bg-green-100 text-green-800">已完成</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="task-card bg-white rounded-lg shadow p-4 border border-gray-200">
                                <div class="flex justify-between items-start">
                                    <div class="flex-1">
                                        <div class="flex items-center">
                                            <input type="checkbox" checked class="mr-3 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                                            <h5 class="font-medium text-gray-900">数据库设计</h5>
                                        </div>
                                        <p class="text-sm text-gray-600 mt-1 ml-7">设计数据库表结构和关系</p>
                                        <div class="flex items-center mt-2 ml-7 text-xs text-gray-500 space-x-4">
                                            <span><i class="far fa-user mr-1"></i>赵六</span>
                                            <span><i class="far fa-calendar mr-1"></i>2024-02-15</span>
                                            <span class="px-2 py-0.5 rounded-full bg-green-100 text-green-800">已完成</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 里程碑3 -->
                    <div class="mb-6">
                        <div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-r-lg mb-4">
                            <div class="flex justify-between items-center">
                                <div>
                                    <h4 class="font-medium text-gray-900">开发实现</h4>
                                    <p class="text-sm text-gray-600 mt-1">完成系统功能开发与测试</p>
                                </div>
                                <div class="flex items-center space-x-2">
                                    <span class="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800">进行中</span>
                                    <span class="text-sm text-gray-500">65%</span>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 里程碑下的任务 -->
                        <div class="space-y-3 ml-4">
                            <div class="task-card bg-white rounded-lg shadow p-4 border border-gray-200">
                                <div class="flex justify-between items-start">
                                    <div class="flex-1">
                                        <div class="flex items-center">
                                            <input type="checkbox" checked class="mr-3 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                                            <h5 class="font-medium text-gray-900">后端API开发</h5>
                                        </div>
                                        <p class="text-sm text-gray-600 mt-1 ml-7">开发RESTful API接口</p>
                                        <div class="flex items-center mt-2 ml-7 text-xs text-gray-500 space-x-4">
                                            <span><i class="far fa-user mr-1"></i>张三</span>
                                            <span><i class="far fa-calendar mr-1"></i>2024-03-10</span>
                                            <span class="px-2 py-0.5 rounded-full bg-green-100 text-green-800">已完成</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="task-card bg-white rounded-lg shadow p-4 border border-gray-200">
                                <div class="flex justify-between items-start">
                                    <div class="flex-1">
                                        <div class="flex items-center">
                                            <input type="checkbox" class="mr-3 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                                            <h5 class="font-medium text-gray-900">前端界面开发</h5>
                                        </div>
                                        <p class="text-sm text-gray-600 mt-1 ml-7">开发用户界面和交互功能</p>
                                        <div class="flex items-center mt-2 ml-7 text-xs text-gray-500 space-x-4">
                                            <span><i class="far fa-user mr-1"></i>李四</span>
                                            <span><i class="far fa-calendar mr-1"></i>2024-03-15</span>
                                            <span class="px-2 py-0.5 rounded-full bg-blue-100 text-blue-800">进行中</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="task-card bg-white rounded-lg shadow p-4 border border-gray-200">
                                <div class="flex justify-between items-start">
                                    <div class="flex-1">
                                        <div class="flex items-center">
                                            <input type="checkbox" class="mr-3 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                                            <h5 class="font-medium text-gray-900">系统测试</h5>
                                        </div>
                                        <p class="text-sm text-gray-600 mt-1 ml-7">进行功能测试和性能测试</p>
                                        <div class="flex items-center mt-2 ml-7 text-xs text-gray-500 space-x-4">
                                            <span><i class="far fa-user mr-1"></i>王五</span>
                                            <span><i class="far fa-calendar mr-1"></i>2024-04-05</span>
                                            <span class="px-2 py-0.5 rounded-full bg-yellow-100 text-yellow-800">待开始</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 未关联里程碑的任务 -->
                    <div class="mb-6">
                        <div class="bg-gray-50 border-l-4 border-gray-400 p-4 rounded-r-lg mb-4">
                            <h4 class="font-medium text-gray-900">未分配里程碑的任务</h4>
                        </div>
                        
                        <div class="space-y-3 ml-4">
                            <div class="task-card bg-white rounded-lg shadow p-4 border border-gray-200">
                                <div class="flex justify-between items-start">
                                    <div class="flex-1">
                                        <div class="flex items-center">
                                            <input type="checkbox" class="mr-3 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                                            <h5 class="font-medium text-gray-900">项目文档编写</h5>
                                        </div>
                                        <p class="text-sm text-gray-600 mt-1 ml-7">编写项目使用手册和技术文档</p>
                                        <div class="flex items-center mt-2 ml-7 text-xs text-gray-500 space-x-4">
                                            <span><i class="far fa-user mr-1"></i>赵六</span>
                                            <span><i class="far fa-calendar mr-1"></i>2024-04-20</span>
                                            <span class="px-2 py-0.5 rounded-full bg-yellow-100 text-yellow-800">待开始</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 列表视图（默认隐藏） -->
                <div id="list-view" class="task-view hidden">
                    <div class="bg-white rounded-lg shadow overflow-hidden">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        <input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                                    </th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">任务名称</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">里程碑</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">负责人</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">截止日期</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <input type="checkbox" checked class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">用户调研</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">需求分析</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">张三</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">已完成</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2024-01-10</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                        <button class="text-blue-600 hover:text-blue-900 mr-3">编辑</button>
                                        <button class="text-red-600 hover:text-red-900">删除</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <input type="checkbox" checked class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">需求文档编写</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">需求分析</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">李四</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">已完成</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2024-01-15</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                        <button class="text-blue-600 hover:text-blue-900 mr-3">编辑</button>
                                        <button class="text-red-600 hover:text-red-900">删除</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">前端界面开发</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">开发实现</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">李四</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">进行中</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2024-03-15</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                        <button class="text-blue-600 hover:text-blue-900 mr-3">编辑</button>
                                        <button class="text-red-600 hover:text-red-900">删除</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- 看板视图（默认隐藏） -->
                <div id="board-view" class="task-view hidden">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <!-- 待开始列 -->
                        <div class="bg-gray-100 rounded-lg p-4">
                            <h3 class="font-medium text-gray-900 mb-4">待开始</h3>
                            <div class="space-y-3">
                                <div class="bg-white rounded-lg shadow p-4">
                                    <h4 class="font-medium text-gray-900 mb-2">系统测试</h4>
                                    <p class="text-sm text-gray-600 mb-3">进行功能测试和性能测试</p>
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center text-xs text-gray-500">
                                            <i class="far fa-user mr-1"></i>王五
                                        </div>
                                        <span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">低优先级</span>
                                    </div>
                                    <div class="mt-2 text-xs text-gray-500">
                                        <i class="far fa-calendar mr-1"></i>2024-04-05
                                    </div>
                                </div>
                                
                                <div class="bg-white rounded-lg shadow p-4">
                                    <h4 class="font-medium text-gray-900 mb-2">项目文档编写</h4>
                                    <p class="text-sm text-gray-600 mb-3">编写项目使用手册和技术文档</p>
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center text-xs text-gray-500">
                                            <i class="far fa-user mr-1"></i>赵六
                                        </div>
                                        <span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800">高优先级</span>
                                    </div>
                                    <div class="mt-2 text-xs text-gray-500">
                                        <i class="far fa-calendar mr-1"></i>2024-04-20
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 进行中列 -->
                        <div class="bg-blue-50 rounded-lg p-4">
                            <h3 class="font-medium text-gray-900 mb-4">进行中</h3>
                            <div class="space-y-3">
                                <div class="bg-white rounded-lg shadow p-4">
                                    <h4 class="font-medium text-gray-900 mb-2">前端界面开发</h4>
                                    <p class="text-sm text-gray-600 mb-3">开发用户界面和交互功能</p>
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center text-xs text-gray-500">
                                            <i class="far fa-user mr-1"></i>李四
                                        </div>
                                        <span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">中优先级</span>
                                    </div>
                                    <div class="mt-2 text-xs text-gray-500">
                                        <i class="far fa-calendar mr-1"></i>2024-03-15
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 已完成列 -->
                        <div class="bg-green-50 rounded-lg p-4">
                            <h3 class="font-medium text-gray-900 mb-4">已完成</h3>
                            <div class="space-y-3">
                                <div class="bg-white rounded-lg shadow p-4">
                                    <h4 class="font-medium text-gray-900 mb-2">用户调研</h4>
                                    <p class="text-sm text-gray-600 mb-3">进行用户访谈和问卷调查</p>
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center text-xs text-gray-500">
                                            <i class="far fa-user mr-1"></i>张三
                                        </div>
                                        <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">已完成</span>
                                    </div>
                                    <div class="mt-2 text-xs text-gray-500">
                                        <i class="far fa-calendar-check mr-1"></i>2024-01-10
                                    </div>
                                </div>
                                
                                <div class="bg-white rounded-lg shadow p-4">
                                    <h4 class="font-medium text-gray-900 mb-2">需求文档编写</h4>
                                    <p class="text-sm text-gray-600 mb-3">编写详细的需求规格说明书</p>
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center text-xs text-gray-500">
                                            <i class="far fa-user mr-1"></i>李四
                                        </div>
                                        <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">已完成</span>
                                    </div>
                                    <div class="mt-2 text-xs text-gray-500">
                                        <i class="far fa-calendar-check mr-1"></i>2024-01-15
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 甘特图标签页 -->
            <div id="gantt-tab" class="tab-content p-6">
                <div class="mb-4">
                    <h3 class="text-lg font-medium text-gray-900">项目甘特图</h3>
                    <p class="text-sm text-gray-600 mt-1">可视化项目时间线和任务依赖关系</p>
                </div>
                <div class="bg-white rounded-lg shadow p-6" style="height: 500px;">
                    <div class="flex items-center justify-center h-full">
                        <div class="text-center">
                            <i class="fas fa-chart-gantt text-6xl text-gray-300 mb-4"></i>
                            <p class="text-gray-500">甘特图将在此处显示</p>
                            <p class="text-sm text-gray-400 mt-2">集成第三方甘特图库后，这里将显示项目时间线</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 团队协作标签页 -->
            <div id="team-tab" class="tab-content p-6">
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <!-- 团队成员 -->
                    <div class="bg-white rounded-lg shadow">
                        <div class="px-6 py-4 border-b border-gray-200">
                            <h3 class="text-lg font-medium text-gray-900">团队成员</h3>
                        </div>
                        <div class="p-6">
                            <div class="space-y-4">
                                <div class="flex items-center">
                                    <div class="flex-shrink-0 h-10 w-10">
                                        <div class="h-10 w-10 rounded-full bg-blue-500 flex items-center justify-center">
                                            <span class="text-white font-medium">张</span>
                                        </div>
                                    </div>
                                    <div class="ml-4">
                                        <div class="text-sm font-medium text-gray-900">张三</div>
                                        <div class="text-sm text-gray-500">项目经理</div>
                                    </div>
                                    <div class="ml-auto">
                                        <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">在线</span>
                                    </div>
                                </div>
                                
                                <div class="flex items-center">
                                    <div class="flex-shrink-0 h-10 w-10">
                                        <div class="h-10 w-10 rounded-full bg-purple-500 flex items-center justify-center">
                                            <span class="text-white font-medium">李</span>
                                        </div>
                                    </div>
                                    <div class="ml-4">
                                        <div class="text-sm font-medium text-gray-900">李四</div>
                                        <div class="text-sm text-gray-500">前端开发</div>
                                    </div>
                                    <div class="ml-auto">
                                        <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">在线</span>
                                    </div>
                                </div>
                                
                                <div class="flex items-center">
                                    <div class="flex-shrink-0 h-10 w-10">
                                        <div class="h-10 w-10 rounded-full bg-yellow-500 flex items-center justify-center">
                                            <span class="text-white font-medium">王</span>
                                        </div>
                                    </div>
                                    <div class="ml-4">
                                        <div class="text-sm font-medium text-gray-900">王五</div>
                                        <div class="text-sm text-gray-500">后端开发</div>
                                    </div>
                                    <div class="ml-auto">
                                        <span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">离线</span>
                                    </div>
                                </div>
                                
                                <div class="flex items-center">
                                    <div class="flex-shrink-0 h-10 w-10">
                                        <div class="h-10 w-10 rounded-full bg-red-500 flex items-center justify-center">
                                            <span class="text-white font-medium">赵</span>
                                        </div>
                                    </div>
                                    <div class="ml-4">
                                        <div class="text-sm font-medium text-gray-900">赵六</div>
                                        <div class="text-sm text-gray-500">测试工程师</div>
                                    </div>
                                    <div class="ml-auto">
                                        <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">在线</span>
                                    </div>
                                </div>
                            </div>
                            <div class="mt-6">
                                <button class="w-full px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition">
                                    <i class="fas fa-user-plus mr-2"></i>添加成员
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 最近活动 -->
                    <div class="bg-white rounded-lg shadow">
                        <div class="px-6 py-4 border-b border-gray-200">
                            <h3 class="text-lg font-medium text-gray-900">最近活动</h3>
                        </div>
                        <div class="p-6">
                            <div class="space-y-4">
                                <div class="flex items-start">
                                    <div class="flex-shrink-0">
                                        <div class="h-8 w-8 rounded-full bg-green-100 flex items-center justify-center">
                                            <i class="fas fa-check text-green-600 text-xs"></i>
                                        </div>
                                    </div>
                                    <div class="ml-3">
                                        <p class="text-sm text-gray-900">张三完成了任务 <span class="font-medium">"用户调研"</span></p>
                                        <p class="text-xs text-gray-500 mt-1">2小时前</p>
                                    </div>
                                </div>
                                
                                <div class="flex items-start">
                                    <div class="flex-shrink-0">
                                        <div class="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center">
                                            <i class="fas fa-comment text-blue-600 text-xs"></i>
                                        </div>
                                    </div>
                                    <div class="ml-3">
                                        <p class="text-sm text-gray-900">李四在任务 <span class="font-medium">"前端界面开发"</span> 中添加了评论</p>
                                        <p class="text-xs text-gray-500 mt-1">5小时前</p>
                                    </div>
                                </div>
                                
                                <div class="flex items-start">
                                    <div class="flex-shrink-0">
                                        <div class="h-8 w-8 rounded-full bg-purple-100 flex items-center justify-center">
                                            <i class="fas fa-plus text-purple-600 text-xs"></i>
                                        </div>
                                    </div>
                                    <div class="ml-3">
                                        <p class="text-sm text-gray-900">王五创建了新任务 <span class="font-medium">"系统测试"</span></p>
                                        <p class="text-xs text-gray-500 mt-1">昨天</p>
                                    </div>
                                </div>
                                
                                <div class="flex items-start">
                                    <div class="flex-shrink-0">
                                        <div class="h-8 w-8 rounded-full bg-yellow-100 flex items-center justify-center">
                                            <i class="fas fa-flag text-yellow-600 text-xs"></i>
                                        </div>
                                    </div>
                                    <div class="ml-3">
                                        <p class="text-sm text-gray-900">赵六更新了里程碑 <span class="font-medium">"开发实现"</span> 的进度</p>
                                        <p class="text-xs text-gray-500 mt-1">2天前</p>
                                    </div>
                                </div>
                            </div>
                            <div class="mt-6">
                                <button class="w-full px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition">
                                    查看所有活动
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 标签页切换功能
        document.addEventListener('DOMContentLoaded', function() {
            const tabButtons = document.querySelectorAll('.tab-btn');
            const tabContents = document.querySelectorAll('.tab-content');
            
            tabButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const tabId = this.getAttribute('data-tab');
                    
                    // 移除所有活动状态
                    tabButtons.forEach(btn => {
                        btn.classList.remove('border-blue-500', 'text-blue-600');
                        btn.classList.add('border-transparent', 'text-gray-500');
                    });
                    
                    tabContents.forEach(content => {
                        content.classList.remove('active');
                    });
                    
                    // 添加当前活动状态
                    this.classList.remove('border-transparent', 'text-gray-500');
                    this.classList.add('border-blue-500', 'text-blue-600');
                    
                    document.getElementById(tabId + '-tab').classList.add('active');
                });
            });
            
            // 视图切换功能
            const viewButtons = document.querySelectorAll('.view-toggle');
            const taskViews = document.querySelectorAll('.task-view');
            
            viewButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const viewId = this.getAttribute('data-view');
                    
                    // 移除所有活动状态
                    viewButtons.forEach(btn => {
                        btn.classList.remove('active');
                    });
                    
                    taskViews.forEach(view => {
                        view.classList.add('hidden');
                    });
                    
                    // 添加当前活动状态
                    this.classList.add('active');
                    document.getElementById(viewId + '-view').classList.remove('hidden');
                });
            });
            
            // 筛选器功能
            const filterButtons = document.querySelectorAll('.filter-btn');
            
            filterButtons.forEach(button => {
                button.addEventListener('click', function() {
                    // 移除所有活动状态
                    filterButtons.forEach(btn => {
                        btn.classList.remove('active');
                    });
                    
                    // 添加当前活动状态
                    this.classList.add('active');
                    
                    // 这里可以添加实际的筛选逻辑
                    const filterType = this.textContent.trim();
                    console.log('应用筛选器:', filterType);
                });
            });
        });
    </script>
</body>
</html>